import React from 'react'
import { connect } from 'react-redux'
import { projectLabelView as projectDuck } from 'ducks'
import PropTypes from 'prop-types'
import TouchContainer from './touchContainer'

const TouchLayerView = ({
  actionPaintPoint, actionPointerMove, width, height, active,
}) => {
  if (active) {
    return (
      <TouchContainer
        width={width}
        height={height}
        action={actionPaintPoint}
        move={actionPointerMove}
      />
    )
  }
  return null
}

TouchLayerView.propTypes = {
  active: PropTypes.bool.isRequired,
  actionPaintPoint: PropTypes.func.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
}

const mapDispatchToProps = {
  actionPaintPoint: projectDuck.creators.actionPaintPoint,
  actionPointerMove: projectDuck.creators.actionPointerMove,
}

export default connect(
  null,
  mapDispatchToProps,
)(TouchLayerView)
